<!--  -->
<template>
  <el-form-item :label-width="formLabelWidth" :label="title" style="margin-bottom:0px;">
    <el-input @blur="dataBlur" size="mini" style="width:80px;" :disabled="def" v-model="paddingLeft" maxlength="12"
      placeholder="模板默认"></el-input>
    <el-checkbox v-model="def">默认</el-checkbox>
    <span class="tip-color1">例如：12px </span>
  </el-form-item>
</template>

<script>
export default {
  mounted () {
    if (!this.defValue) {
      this.def = true
    }
    this.paddingLeft = this.defValue
  },
  props: {
    formLabelWidth: {
      type: String,
      default: '120px'
    },
    defValue: {
      type: String
    },
    chgValue: {
      type: Function
    },
    title: {
      type: String,
      default: '左边内间距'
    }
  },
  data () {
    return {
      paddingLeft: '',
      def: false
    }
  },
  watch: {
    def: {
      handler () {
        if (this.def) {
          this.paddingLeft = ''
        }
      },
      deep: true
    },
    paddingLeft: {
      handler () {
        this.chgValue(this.paddingLeft)
      },
      deep: true
    }
  },
  methods: {
    dataChange () {
    },
    dataBlur () {
      if (isNaN(parseInt(this.paddingLeft))) {
        this.paddingLeft = ''
      } else {
        if (/^(\d|\.)+(em|rem|%)$/.test(this.paddingLeft)) {
          this.paddingLeft = this.paddingLeft
        } else {
          this.paddingLeft = parseInt(this.paddingLeft) + 'px'
        }
      }
      // if (/^-?(\d|\.)+$/.test(this.paddingLeft)) {
      //   this.paddingLeft = this.paddingLeft + 'px'
      // }
    }
  }
}

</script>
